<template>

  <view class="container">

    <view class="header">
      <up-steps :current="data.state-1"
                activeColor="#F67800"
                activeIcon="checkmark-circle-fill"
                i inactiveColor="#000" inactiveIcon="minus-circle">
        <up-steps-item v-for="(it,i) in ['资质信息',  '店铺信息', '经营信息', '等待审核']" :iconSize="32"
                       title="资质信息">
          <template v-slot:icon>
            <up-icon v-if="data.state>i" color="#F67800" name="checkmark-circle-fill" size="19" />
            <view v-else class="quan"></view>
          </template>
          <template v-slot:title>
            <view :style="{color:data.state>i?'#F67800':'#000'}" class="text_4_28">
              {{ it }}
            </view>
          </template>
        </up-steps-item>
      </up-steps>
    </view>
    <view v-if="data.state==1" class="content">
      <view class="typelist_cnt l_f_r_sa_c">
        <view v-for="(it,i) in ['个体工商户', '企业']" :class="{active:data.form.types==i }" class="type_it bg_set"
              @click="data.form.types=i">
          <view :class="[`box${i}`]" class="box bg_set l_f_r l_al_c">
            <view class="text_4_28 l_f_r_c_c">
              <view>{{ it }}</view>
            </view>
          </view>

        </view>
      </view>
      <uni-section title="真实姓名" titleColor="#000">
        <uni-easyinput v-model="data.form.username" :disabled="data.statetype" class="uni-mt-5"
                       placeholder="请输入内容" trim="all" @input="data.errmsg!='card为必填字段'?data.errmsg='':''"></uni-easyinput>
        <view v-if="data.errmsg&&data.errmsg!='card为必填字段'" style="color: red;font-size: 12px;margin-top: 10rpx;">
          {{ data.errmsg != "username为必填字段" ? data.errmsg : "真实姓名为必填字段" }}
        </view>
      </uni-section>
      <uni-section title="身份证号码" titleColor="#000">
        <uni-easyinput v-model="data.form.card" :disabled="data.statetype" class="uni-mt-5"
                       placeholder="请输入内容" trim="all" @input="data.errmsg!='username为必填字段'?data.errmsg='':''"></uni-easyinput>
        <view v-if="data.errmsg&&data.errmsg!='username为必填字段'"
              style="color: red;font-size: 12px;margin-top: 10rpx;">
          {{ data.errmsg != "card为必填字段" ? data.errmsg : "身份证号码为必填字段" }}
        </view>
      </uni-section>
      <uni-section v-if="data.form.types==1" title="企业名称" titleColor="#000">
        <uni-easyinput v-model="data.form.enterprise" :disabled="data.statetype" class="uni-mt-5" placeholder="请输入内容"
                       trim="all"></uni-easyinput>
      </uni-section>
      <uni-section v-if="data.form.types==1" title="统一社会信用代码" titleColor="#000">
        <uni-easyinput v-model="data.form.trade_code" :disabled="data.statetype" class="uni-mt-5" placeholder="请输入内容"
                       trim="all"></uni-easyinput>
      </uni-section>

      <uni-section title="身份证照片" titleColor="#000">
        <view class="card_cnt l_f_r_sb_c">

          <view class="id_crd img_cnt l_f_c_c_c" @click="$Uplode(positive)">
            <image v-if="data.form.positive" :src="data.form.positive" class="img" mode=""></image>
            <view v-else class="card_bg bg_set l_f_c_c_c">
              <view class="icon_box l_f_c_c_c">
                <uni-icons class="rr-icons" color="#fff" size="25" type="plusempty"></uni-icons>
              </view>
              <view class="text">身份证正面</view>
            </view>

          </view>
          <view class="id_crd img_cnt l_f_c_c_c" @click="$Uplode(side)">
            <image v-if="data.form.side" :src="data.form.side" class="img" mode=""></image>
            <view v-else class="card_bg  card_bg2 bg_set l_f_c_c_c">

              <view class="icon_box l_f_c_c_c">
                <uni-icons class="rr-icons" color="#fff" size="25" type="plusempty"></uni-icons>
              </view>
              <view class="text_4_24">身份证反面</view>
            </view>

          </view>
        </view>
      </uni-section>
      <uni-section title="营业执照" titleColor="#000">
        <view class="id_crd license img_cnt l_f_c_c_c" @click="$Uplode(license)">
          <image v-if="data.form.license" :src="data.form.license" class="img" mode=""></image>
          <view v-else class="card_bg  card_bg2 bg_set l_f_c_c_c">

            <view class="icon_box l_f_c_c_c">
              <uni-icons class="rr-icons" color="#fff" size="25" type="plusempty"></uni-icons>
            </view>
            <view class="text_4_24">上传营业执照</view>
          </view>

        </view>
      </uni-section>

    </view>
    <view v-if="data.state==2" class="content">
      <uni-section title="店铺名称" titleColor="#000">
        <uni-easyinput v-model="data.form.name" :disabled="data.statetype" class="uni-mt-5" maxlength="10" placeholder="请输入内容"
                       trim="all"></uni-easyinput>
      </uni-section>
      <uni-section title="门店logo" titleColor="#000">
        <view class="id_crd license img_cnt l_f_c_c_c" @click="$Uplode(shop_head)">
          <image v-if="data.form.shop_head" :src="data.form.shop_head" class="img" mode=""></image>
          <view v-else class="card_bg  noBg bg_set l_f_c_c_c">
            <view class="icon_box l_f_c_c_c">
              <uni-icons class="rr-icons" color="#fff" size="25" type="plusempty"></uni-icons>
            </view>
            <view class="text_4_24">上传门店logo</view>
          </view>

        </view>

      </uni-section>
      <uni-section title="店铺地址" titleColor="#000">
        <view :class="{disabled:data.statetype}" style="padding: 20rpx;border: 1rpx solid #eee;">
          <view v-if="data.statetype"> {{ data.addressstr ? data.addressstr : "" }}</view>

          <lcw-select-address v-else ref="lcwAddressRef"
                              :address="data.address"
                              :disabled="data.statetype" @change="addresschange"></lcw-select-address>
        </view>
      </uni-section>
      <uni-section title="详细地址" titleColor="#000">
        <uni-easyinput v-model="data.form.address" :disabled="data.statetype" placeholder="请输入内容"
                       type="textarea"></uni-easyinput>
      </uni-section>
      <uni-section title="联系电话" titleColor="#000">
        <uni-easyinput v-model="data.form.mobile" :disabled="data.statetype" class="uni-mt-5" placeholder="请输入内容"
                       trim="all"></uni-easyinput>
      </uni-section>
<!--      <uni-section title="折扣">-->
<!--        <uni-easyinput class="uni-mt-5" trim="all" v-model="data.form.discount" type="number" placeholder="请输入内容"   :disabled="data.statetype"></uni-easyinput>-->
<!--      </uni-section>-->
      <!--      <uni-section titleColor="#000" title="折扣">-->
      <!--        <uni-easyinput class="uni-mt-5" trim="all" v-model="data.form.discount" type="number" placeholder="请输入内容"-->
      <!--                       :disabled="data.statetype"></uni-easyinput>-->
      <!--      </uni-section>-->

    </view>
    <view v-if="data.state==3" class="content">
<!--      <uni-section title="开店方式" titleColor="#000">-->
<!--        <uni-data-select v-model="data.form.code" :clear="false" :disabled="data.statetype"-->
<!--                         :localdata="data.range"-->
<!--                         @change="changecode"></uni-data-select>-->
<!--      </uni-section>-->
      <uni-section title="商铺类型" titleColor="#000">
        <uni-data-select v-model="data.form.shop_class_id"
                         :clear="false"
                         :disabled="data.statetype" :localdata="data.shopClassList"
                         @change="changeshopClass"></uni-data-select>
      </uni-section>
      <uni-section title="经营范围" titleColor="#000">
        <uni-easyinput v-model="data.form.trade" :disabled="data.statetype" placeholder="经营范围不超过200字"
                       type="textarea"></uni-easyinput>
      </uni-section>
      <uni-section title="商铺介绍" titleColor="#000">
        <uni-easyinput v-model="data.form.introduce" :disabled="data.statetype" placeholder="商铺介绍不超过200字"
                       type="textarea"></uni-easyinput>
      </uni-section>

      <uni-section title="补充材料" titleColor="#000">
        <view class="id_crd license img_cnt l_f_c_c_c" @click="$Uplode(other)">
          <image v-if="data.form.other" :src="data.form.other" class="img" mode=""></image>
          <view v-else class="card_bg  noBg bg_set l_f_c_c_c">
            <view class="icon_box l_f_c_c_c">
              <uni-icons class="rr-icons" color="#fff" size="25" type="plusempty"></uni-icons>
            </view>
            <view class="text_4_24">上传补充材料</view>
          </view>

        </view>
      </uni-section>
    </view>
    <view v-if="data.state==4" class="content">

      <view v-if="!data.errdata" class="lastbox">
        <image class="sh_img" mode="aspectFill" src="/static/appImg/user/shz.png"></image>
        <view class="title">
          提交成功
        </view>
        <view class="titles">
          正在审核处理中，请耐心等待……
        </view>
      </view>
      <view v-else class="lastbox">
        <image mode="aspectFill" src="https://img.fubaozx.cn/static/oldImg/16995001877708.png"></image>
        <view class="title">
          审核失败
        </view>
        <view v-if="data.reason" class="titles">
          拒绝原因：{{ data.reason }}
        </view>
        <view class="titles">
          可
          <text @click="data.state=1">点击修改</text>
          后重新提交资料进行审核~
        </view>
      </view>
    </view>
    <!-- <view class="next" @click="data.state++,realName()" v-if="data.state<3"> 暂时注释 -->
    <view v-if="data.state<3" class="next" @click="data.state++">
      下一步
    </view>
    <view v-if="data.state==3" class="next" @click="applyBusiness">
      提交
    </view>
    <view v-if="data.state==3" class="bottom">
      <label class="radio">
        <radio  @click="checkedchange" :checked="checked" color="#f67800" style="transform:scale(0.7)" value="r1" />
        我已阅读并同意
        <text @click="$goURl('/pages/personal/agreement/agreement?code=2')">《商家入驻协议》</text>
      </label>
    </view>
    <view v-if="data.state>1&&data.state<4" class="nexts" @click="data.state--">
      返回上一步
    </view>
    <view v-if="data.state==4&&!errdata" class="next fhgr" @click="back">
      返回个人中心
    </view>

  </view>
</template>

<script setup>
import { getCurrentInstance, reactive, ref } from "vue";
import { onLoad, onPullDownRefresh, onReachBottom, onShow } from "@dcloudio/uni-app";
import goURl from "@/utils/goURl";

const { proxy } = getCurrentInstance();
const data = reactive({
  errmsg: "",
  statetype: false,
  shopClassList: "",
  state: 1,
  errdata: false,
  value: 0,
  address: {},
  range: [{
    value: 0,
    text: "供应链"
  },
    {
      value: 1,
      text: "本地生活"
    }
  ],
  addressstr: "",
  reason: "",
  form: {
    name: "",//店铺名称
    shop_class_id: "",//店铺分类ID
    code: 0,//0供应链 1 本地生活
    introduce: "",//商家店铺的介绍
    trade: "",//经营范围
    mobile: "",//联系电话
    license: "",//营养执照
    shop_head: "",//门头照或店铺logo
    province: "",//店铺地址省 code为1必填
    city: "",//店铺地址市 code为1必填
    area: "",//店铺地址区 code为1必填
    street: "",//店铺地址街道 code为1必填
    address: "",//店铺详细地址 code为1必填
    other: "",//其他补充材料
    types: 0,//
    positive: "",//身份证正面
    side: "",//身份证反面
    username: "",//真实姓名
    card: "",//。身份证号码
    trade_code: "",//社会统一信用代码
    enterprise: "",
    longitude: "",
    latitude: "",
    discount: 0//折扣
  }
});
let lcwAddressRef = ref();
let checked = ref(true);

onLoad((option) => {
  console.log("位置");
  uni.getLocation({
    type: "wgs84",
    geocode: true,
    success: function(res) {
      console.log("当前位置的经度：" + res.longitude);
      console.log("当前位置的纬度：" + res.latitude);
      data.form.longitude = res.longitude;
      data.form.latitude = res.latitude;
    },
    fail: function(err) {
      console.log("fail：" + JSON.stringify(err));
    }
  });
  applyBusinesss();
  shopClassList();
});
onShow(() => {
});
onPullDownRefresh(() => {
  setTimeout(function() {
    uni.stopPullDownRefresh();
  }, 1000);
});
onReachBottom(() => {
  console.log("onReachBottom");
});

function back() {
 uni.switchTab({
   url:
       "/pages/personal/index"

 })
}

function checkedchange() {
  // console.log('checkedchange', checked.value);
  checked.value = !checked.value;
}

function addresschange(value) {//地址选择
  data.address = value;
  data.addressstr = value.province + value.city + value.area + value.street;
  data.form.province = value.province;
  data.form.city = value.city;
  data.form.area = value.area;
  data.form.street = value.street;
  uni.request({ //地址换经纬度

    url: `https://restapi.amap.com/v3/geocode/geo?address=${data.form.province+data.form.city+data.form.area+data.form.street}&key=3e2ed72107f91ba0e8a4f25e297eba78`,
    method: "GET",
    success(res) {
      if (res.data.status == 1) {
        const addressarr = res.data.geocodes[0].location.split(",");
        data.form.latitude = Number(addressarr[1])
        data.form.longitude = Number(addressarr[0])
        handelshowMap()

      } else {
        uni.showToast({
          icon: "none",
          title: '请填写地址信息'
        })
      }
    },
  });
}
const handelshowMap = () => {
  if (!data.address.province) {
    uni.showToast({
      title: '请先选择省市区',
      icon: 'none'
    })
    return
  }


  uni.chooseLocation({
    latitude:  data.form.latitude,
    longitude:  data.form.longitude,
    success: function(res) {
      // console.log('chooseLocation', res);
      // console.log('位置名称：' + res.name);
      // console.log('详细地址：' + res.address);
      // console.log('纬度：' + res.latitude);
      // console.log('经度：' + res.longitude);
      data.form.longitude = res.longitude
      data.form.latitude = res.latitude
      data.form.detailed = res.name

    },
    fail() {
      data.form.longitude = ''
      data.form.latitude = ''
      data.form.detailed = ''
      addresstr.value = ''
      data.address = {
        province: '',
        city: '',
        area: '',
        street: "",
      }
      lcwAddressRef.value.reset()
    }

  })


}

function setSelectAddress() {//打开地址选择弹窗
  lcwAddressRef.value.open();
}

function changecode(e) {//商家分类选择
  console.log("e:", e);
  data.form.code = e;
  data.form.shop_class_id = "";
  shopClassList();
}

function positive(e) {//身份证正面上传
  console.log("e:", e);
  data.form.positive = e;
}

function side(e) {//身份证反面上传
  console.log("e:", e);
  data.form.side = e;
}

function other(e) {//补充材料
  console.log("e:", e);
  data.form.other = e;
}

function shop_head(e) {//店铺logo上传
  console.log("e:", e);
  data.form.shop_head = e;
}

function license(e) {//营业执照上传
  console.log("e:", e);
  data.form.license = e;
}

function changeshopClass(e) {
  data.form.shop_class_id = e;
  console.log("e:", data.form.shop_class_id);

}

function shopClassList() {//获取分类
  proxy.$request({
    url: `api/shopClassList/?page=1&size=999&code=${data.form.code}`,
    method: "get",
    success(res) {
      data.shopClassList = res.data.data.map(item => {
        return {
          value: item.ID,
          text: item.name
        };
      });
    }
  });
}

function realName() {//实名
  proxy.$request({
    url: `api/is_real_name/`,
    method: "post",
    data: {
      username: data.form.username,
      card: data.form.card
    },
    success(res) {
      console.log(res);
      if (res.errno == 0) {
        data.errmsg = "";

      } else {
        data.state--;
        data.errmsg = res.errmsg;
        // uni.showToast({
        // 	icon:'none',
        // 	title:res.errmsg
        // })
      }
    }
  });
}

function applyBusinesss() {//获取审核结果
  proxy.$request({
    url: `api/applyBusiness/`,
    method: "put",
    success(res) {
      console.log(res);
      if (res.errno == 0) {
        data.form = res.data;
        data.addressstr = res.data.province + res.data.city + res.data.area;
        if (res.data.state == 1 || res.data.state == 3) {
          data.statetype = true;
        }
        if (res.data.state == 2) {
          data.errdata = true;
          uni.showToast({
            icon: "none",
            title: "审核不通过:" + res.data.reason
          });
          data.reason = res.data.reason;
          data.state = 4;
        }
        if (res.data.state == 0) {
          uni.showToast({
            icon: "none",
            title: "审核中"
          });
          data.state = 4;
        }
      } else {
        data.state = 1;
      }
    }
  });
}

function applyBusiness() {
  if (!data.form.enterprise && data.form.types == 1) {
    uni.showToast({
      icon: "none",
      position: "bottom",
      title: "请填写企业名称"
    });
    data.state = 1;
    return false;
  }
  if (!data.form.trade_code && data.form.types == 1) {
    uni.showToast({
      icon: "none",
      position: "bottom",
      title: "请填写社会统一信用代码"
    });
    data.state = 1;
    return false;
  }
  if (!data.form.positive) {
    uni.showToast({
      icon: "none",
      position: "bottom",
      title: "请上传身份证正面"
    });
    data.state = 1;
    return false;
  }
  if (!data.form.side) {
    uni.showToast({
      icon: "none",
      position: "bottom",
      title: "请上传身份证反面"
    });
    data.state = 1;
    return false;
  }

  if (!data.form.license) {
    uni.showToast({
      icon: "none",
      position: "bottom",
      title: "请上传营业执照"
    });
    data.state = 1;
    return false;
  }
  if (!data.form.name) {
    uni.showToast({
      icon: "none",
      position: "bottom",
      title: "请填写店铺名称"
    });
    data.state = 2;
    return false;
  }
  if (!data.form.shop_head) {
    uni.showToast({
      icon: "none",
      position: "bottom",
      title: "请上传门头照或店铺logo"
    });
    data.state = 2;
    return false;
  }

  if (!data.form.mobile) {
    uni.showToast({
      icon: "none",
      position: "bottom",
      title: "请填写联系电话"
    });
    data.state = 2;
    return false;
  }
  if (!(/^1[3456789]\d{9}$/).test(data.form.mobile)) {
    uni.showToast({
      icon: "none",
      position: "bottom",
      title: "联系电话不正确"
    });
    data.state = 2;
    return false;
  }
  data.form.discount = parseInt(data.form.discount);
  if (data.form.discount < 0 || data.form.discount > 100) {
    uni.showToast({
      icon: "none",
      position: "bottom",
      title: "折扣需在0-100"
    });
    return false;
  }
  if (!data.form.address && data.form.code == 1) {
    uni.showToast({
      icon: "none",
      position: "bottom",
      title: "请填写店铺详细地址"
    });
    data.state = 2;
    return false;
  }

  if (!data.form.shop_class_id) {
    uni.showToast({
      icon: "none",
      position: "bottom",
      title: "请填写店铺分类"
    });
    return false;
  }
  if (!data.form.introduce) {
    uni.showToast({
      icon: "none",
      position: "bottom",
      title: "请填写店铺介绍"
    });
    return false;
  }
  if (!data.form.trade) {
    uni.showToast({
      icon: "none",
      position: "bottom",
      title: "请填写经营范围"
    });
    return false;
  }
  if (!checked.value) {
    uni.showToast({
      icon: "none",
      position: "bottom",
      title: "请同意用户协议与隐私协议"
    });
    return false;
  }
  uni.request({//地址换经纬度
    url: `https://restapi.amap.com/v3/geocode/geo?address=${data.form.province + data.form.city + data.form.area + data.form.address}&key=3e2ed72107f91ba0e8a4f25e297eba78`,
    method: "GET",
    success(res) {
      if (res.data.status == 1) {
        const address = res.data.geocodes[0].location.split(",");
        console.log(address);
        data.form.latitude = Number(address[0]);
        data.form.longitude = Number(address[1]);
        proxy.$request({//申请
          url: `api/applyBusiness/`,
          method: "POST",
          data: data.form,
          success(ress) {
            uni.showToast({
              icon: "none",
              title: ress.errmsg
            });

            if (ress.errno == 0) {
              data.state = 4;
              // setTimeout(()=>{
              // 	uni.switchTab({
              // 		url:'/pages/personal/index'
              // 	})
              // },1000)
            }
          }
        });
      } else {
        uni.showToast({
          icon: "none",
          title: "请填写地址信息"
        });
      }
    }
  });

}
</script>

<style lang="scss" scoped>
page {
  background-color: #fff;
}

.container {
  padding: 30rpx;
  background-color: #fff;

  .header {
    display: flex;
    justify-content: space-between;
    font-size: 24rpx;
    padding: 30rpx 0;

  }

  .content {
    .lastbox {
      text-align: center;

      .title {
        font-size: 28rpx;
        font-weight: bold;
        margin: 20rpx 0;
      }

      .titles {
        font-size: 24rpx;
        color: #999;

        text {
          color: #F67800;
        }
      }
    }
  }

  .next {
    color: #fff;
    text-align: center;
    margin: 30rpx auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 690rpx;
    height: 80rpx;
    background: #F67800;
    border-radius: 120rpx 120rpx 120rpx 120rpx;
    box-sizing: border-box;
  }

  .nexts {
    color: #F67800;
    text-align: center;
    padding: 20rpx;
  }
}

.bottom {
  color: #666666;
  padding: 20rpx;
  font-size: 10px;
  text-align: center;

  text {
    color: #F67800;
  }
}

:deep(.u-steps-item__content.u-steps-item__content--row.u-steps-item__content--current) {
  .u-text__value {
    color: #F67800;
    font-size: 24rpx;
    font-weight: 500;
  }
}

.quan {
  border: 1rpx solid #000;
  box-sizing: border-box;
  width: 32rpx;
  height: 32rpx;
  border-radius: 50%;
}

.typelist_cnt {
  .type_it {
    width: 334rpx;
    height: 112rpx;
    background-image: url("https://pili-vod.guanxikeji.com/fubao/img/1755678119256.png");

    &.active {
      background-image: url("https://pili-vod.guanxikeji.com/fubao/img/1755678164229.png");
    }

    .box {
      width: 100%;
      height: 100%;

      &.box0 {
        background-image: url("https://pili-vod.guanxikeji.com/fubao/img/1755678195597.png");

      }

      &.box1 {
        background-image: url("https://pili-vod.guanxikeji.com/fubao/img/1755678235896.png");

      }

      .text_4_28 {
        margin-left: 80rpx;
        width: 100%;
      }
    }


  }

}

.id_crd {
  width: 335rpx;
  height: 209rpx;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  border: 2rpx solid #C4BAAE;

  .card_bg {
    width: 335rpx;
    height: 209rpx;
    background-image: url("https://pili-vod.guanxikeji.com/fubao/img/1755678261749.png");

    .icon_box {
      width: 68rpx;
      height: 68rpx;
      background-color: #f67800;
      border-radius: 50%;
    }

  }

  .card_bg2 {
    background-image: url("https://pili-vod.guanxikeji.com/fubao/img/1755678294815.png");
  }

  &.license {
    width: 690rpx;
    height: 300rpx;
    border: 2rpx solid #C4BAAE;

    .card_bg {
      width: 432rpx;
      height: 252rpx;
      background-image: url("https://pili-vod.guanxikeji.com/fubao/img/1755678317076.png");

      .icon_box {
        width: 68rpx;
        height: 68rpx;
        background-color: #f67800;
        border-radius: 50%;
      }

      &.noBg {
        background-image: none;
      }

    }
  }

}

:deep(.uni-stat__select) {
  //background-color: #F4F2EF;
}

.disabled {
  background-color: #F4F2EF !important;

}

.sh_img {
  width: 320rpx;
  height: 224rpx;
  margin-top: 160rpx;
}

.next.fhgr {
  width: 400rpx;
  margin-top: 84rpx !important;

}
</style>
